<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <div class="table-operator">
                <div>
                    <a-button icon="plus" type="primary" @click="handleAdd">添加</a-button>
                </div>
            </div>
            <a-table
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :rowSelection="rowSelection"
                :scroll="{ x: '100%' }"
                rowKey="id"
                @change="handleChange"
            >
       <span slot="header" slot-scope="text, record">

        </span>
                <span slot="status" slot-scope="text, record">
          <a-switch v-model="record.status"
                    @change="(value) => handleChangeSwitch(value,record)"/>
        </span>
                <span slot="action" slot-scope="text, record">
          <template>
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <a-popconfirm cancel-text="否" ok-text="是" title="确认删除?"
                          @confirm="handleDelete(record)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </span>
            </a-table>
        </a-card>
        <a-modal
            :confirmLoading="modalLoading.loading1"
            :title="modalTitle.title1"
            :visible="modalShow.show1"
            :width="640"
            @cancel="handleCancel"
            @ok="handleConfirm"
        >
            <a-form-model
                v-if="modalShow.show1"
                ref="ruleForm1"
                :model="modalForm.ruleForm1"
                :rules="modalRules.rules1"
                style="margin-bottom:20px"
                v-bind="formItemLayout"
            >
                <a-form-model-item label="Access Key ID" prop="accessKeyId">
                    <a-input v-model="modalForm.ruleForm1.accessKeyId"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="Access Kdy Secret" prop="accessKeySecret">
                    <a-input v-model="modalForm.ruleForm1.accessKeySecret"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="是否启用" prop="description">
                    <a-switch v-model="modalForm.ruleForm1.status"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </page-header-wrapper>
</template>
<script>
import basic from '@/mixins/basic'
import {getMsgIfPage, updateMsgIf, addMsgIf, delMsgIf} from '@/api/api'

export default {
    mixins: [basic],
    data() {
        return {
            request: {
                page: getMsgIfPage,
                update: updateMsgIf,
                add: addMsgIf,
                delete: delMsgIf
            },
            queryParam: {},
            resetQueryParam: {},
            columns: [
                {
                    title: 'Access Key ID',
                    dataIndex: 'accessKeyId'
                },
                {
                    title: 'Access Kdy Secret',
                    dataIndex: 'accessKeySecret'
                },
                {
                    title: '是否启用',
                    dataIndex: 'status',
                    scopedSlots: {customRender: 'status'}
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 150,
                    fixed: 'right',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            tableData: [],
            modalForm: {
                ruleForm1: {
                    id: undefined,
                    accessKeyId: '',
                    accessKeySecret: '',
                    status: true
                },
            },
            modalResetForm: {
                ruleForm1: {
                    id: undefined,
                    accessKeyId: '',
                    accessKeySecret: '',
                    status: true
                }
            },
            modalRules: {
                rules1: {
                    accessKeyId: [{required: true, message: '输入不能为空'}],
                    accessKeySecret: [{required: true, message: '输入不能为空'}],
                }
            }
        }
    },
    methods: {
        formattData(data) {
            data.forEach(el => {
                el.status = el.status == 0
            })
            console.log('data', data)
        },
        handleChangeSwitch(value, record) {
            this.request
                .update({
                    id: record.id,
                    accessKeyId: record.accessKeyId,
                    accessKeySecret: record.accessKeySecret,
                    status: record.status ? 0 : 1
                })
                .then(res => {
                    this.$message.success('修改状态成功')
                })
                .catch(() => {
                    record.status = !record.status
                })
        },
        handleEdit(rowItem) {
            for (const key in this.modalForm.ruleForm1) {
                this.modalForm.ruleForm1[key] = rowItem[key]
            }
            this.modalTitle.title1 = '修改'
            this.modalShow.show1 = true
        },
        handleConfirm() {
            this.$refs.ruleForm1.validate((valid) => {
                if (valid) {
                    this.modalLoading.loading1 = true
                    let form = this.modalForm.ruleForm1.id ? {
                        ...this.modalForm.ruleForm1,
                        status: this.modalForm.ruleForm1.status ? 0 : 1
                    } : {
                        accessKeyId: this.modalForm.ruleForm1.accessKeyId,
                        accessKeySecret: this.modalForm.ruleForm1.accessKeySecret,
                        status: this.modalForm.ruleForm1.status ? 0 : 1
                    }
                    this.request[this.modalForm.ruleForm1.id ? 'update' : 'add']({
                        ...form
                    }).then(res => {
                        this.$message.success(res.msg)
                        this.modalLoading.loading1 = false
                        this.onValidate('ruleForm1')
                        this.modalShow.show1 = false
                        this.onSearch()
                    }).catch(() => {
                        this.modalLoading.loading1 = false
                    })
                }
            })
        }
    }
}
</script>
